<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Hello Vue.js</title>
</head>
<body>
    <div id="app">
        <div> {{counter}} </div>
        <div @click="btnClick">按钮</div>
        <div @click="counter ++">按钮 counter ++</div>
        <div @click="btnClick1(2)">按钮btnClick1(2)</div>
        <div @click="btnClick2(2, $event)">按钮btnClick2(2, $event)</div>
        <div @click="btnClick2($event),btnClick1(2))">按钮btnClick2($event),btnClick1(2))</div>


        ==========事件修饰符 stop、self、once、 prevent、capture========================
        <!--   stop 阻止事件向外传播（事件冒泡）  -->
        <div @click="divClick1">
            <div @click.stop="divClick2">.stop div-button</div>
        </div>
        <div @clic.self="divClick1">
            {{counter}}
            <div @clic.self="divClick1">.self div-button</div>
        </div>
        <div @click.once="divClick2">.once div-button</div>
        <a href="https://hao.360.com/?src=lm&ls=n4c24f70f9e" @click.pre]vent="divClick2">360官网</a>
        <div @click.capture="divClick1">
            divClick --> {{counter}}
            <div @click="divClick2">div-button</div>
        </div>
    </div>

</body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>//计时器
        Vue.createApp({
           data() {
               return{
                   counter: 0
               }
           },
           mounted(){
               setInterval(() => {
                   this.counter += 1
                }, 1000);//毫秒
               },
               template:"<div> {{counter}} </div>"
            }).mount("#app");
    </script>
</html>


